﻿@using CnGalWebSite.Components.Services;
@inject ImagesLargeViewService ImagesLargeViewService

<div class="image-slide-group-card">
    <MWindow @bind-Value="Index">
        @foreach (var item in Model)
        {
            <MWindowItem Value="@Model.IndexOf(item)">
                <MResponsive AspectRatio="16/9D">
                    <MDCard Class="pointer" ShowHoverStyle="true" OnClick="OnClickImage" Style="margin: 3px;">
                        <img class="slide-group-image-large" src="@item.Image" loading="lazy" />
                    </MDCard>
                </MResponsive>

            </MWindowItem>
        }
    </MWindow>
    <MSlideGroup @bind-Value="Index" ShowArrows="true" CenterActive>
        @foreach (var item in Model)
        {
            <MSlideItem>
                <MCard Class="mt-4 me-4 mb-2 pointer" Height="90" Width="160" OnClick="@(()=>{ if (!context.Active) context.Toggle.Invoke();})" RefBack="@context.Ref">
                    <img src="@item.Image" loading="lazy" class="@((context.Active?"active":"")+" image-overlays slide-group-image-thumb")" />
                </MCard>
            </MSlideItem>
        }
    </MSlideGroup>

</div>

@code {
    private StringNumber Index { get; set; } = 0;

    [Parameter]
    public List<ImagesLargeViewModel> Model { get; set; }


    public async void OnClickImage()
    {
        await ImagesLargeViewService.ViewLargeImages(Model.Select(s => new ImagesLargeViewModel
            {
                Image = s.Image,
                Note = s.Note
            }).ToList(), Index.ToInt32());
    }
}
